<template>
  <view class="search">
    <image :src="ossImg('others/component/seach_icon@2x.png')" />
    <input :placeholder="placeholder" placeholder-style="color: #B0B0B0" @confirm="onSearch" />
  </view>
</template>

<script setup>
import { ossImg } from "@/utils/utils"
import { defineProps, defineEmits } from "vue"

const emit = defineEmits(['search'])

const props = defineProps({
  placeholder: {
    type: String,
    default: '搜索商品'
  }
})

const onSearch = ({ detail }) => {
  emit('search', detail.value)
}
</script>

<style lang="less" scoped>
.search {
  width: 100%;
  height: 36px;
  background: #F0F1F3;
  border-radius: 3px;
  display: flex;
  align-items: center;
  box-sizing: border-box;

  image {
    width: 20px;
    height: 20px;
    display: block;
    margin-right: 10px;
  }

  input {
    font-size: 16px;
    line-height: 1;
    color: #222222;
    min-width: 300px;
  }
}
</style>
